<template>
    <view class="page">
        <u-navbar title="登录" bgColor="#c6f3e9" titleStyle="color:#fff; text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.5);"
            leftIconColor="#fff" :placeholder="true" leftIcon="">
        </u-navbar>
        <view class="loginImg">
        </view>
        <u--form class="form" ref="loginForm" :rules="rules" :model="userInfo">
            <u-form-item class="item" prop="email">
                <u-input style="width: 100%;" v-model="userInfo.email" prefixIcon="account" border="bottom" clearable
                    placeholder="请输入邮箱"></u-input>
            </u-form-item>
            <u-form-item class="item" prop="password">
                <u-input style="width: 100%;" v-model="userInfo.password" prefixIcon="lock" border="bottom" password
                    placeholder="请输入密码">
                </u-input>
            </u-form-item>
        </u--form>
        <view class="forget" @click="forget">忘记密码?</view>
        <u-button class="loginBtn" type="primary" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</u-button>
        <view class="register">还没有账号？<span @click="register">注册</span></view>
    </view>
</template>

<script>
export default {
    onShow() {
        this.userInfo.email = this.$tools.getUser()
    },
    data() {
        return {
            title: '书多多',
            userInfo: {
                email: '',
                password: ''
            },
            rules: {
                'email': {
                    type: 'string',
                    required: true,
                    message: '请输入邮箱',
                    trigger: ['blur', 'change']
                },
                'password': {
                    type: 'string',
                    required: true,
                    message: '请输入密码',
                    trigger: ['blur', 'change']
                },
            },
        }

    },
    methods: {

        login() {
            this.$refs.loginForm.validate().then(res => {
                uni.showLoading({
                    title: '登录中...'
                });
                // 将用户信息提交到mutations，存储到本地
                this.$store.commit('SET_CURRENTUSER', this.userInfo.email)
                //在vuex中进行登录
                this.$store.dispatch('login', this.userInfo).then(res => {
                    if (res === 'success') {
                        /**
                         * 登录成功后
                         * 关闭加载框，提示用户登录成功
                         * 链接socket，关闭所有页面，跳转到首页
                        */
                        this.$socket.connect()
                        uni.hideLoading();
                        this.$tools.toast('登录成功');
                        // this.$socket.emit('login',this.$store.state.user.userInfo)
                        this.$Router.replaceAll({
                            name: 'home'
                        })
                    } else {
                        uni.hideLoading();
                        this.$tools.toast(res);
                    }
                })
            })
        },
        forget() {
            this.$Router.push({
                name: 'forgetPwd'
            })
        },
        register() {
            this.$Router.push({
                name: 'register'
            })
        },
    }
}
</script>

<style lang="scss">
page {
    background: #fff;
    width: 100%;
    height: 100%;

    .page {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;

        .loginImg {
            flex-shrink: 0;
            background-image: url('@/static/images/login_title.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 35%;

            .title {
                font-size: 1.5rem;
            }
        }

        .form {
            flex-shrink: 0;
            width: 80%;

            .item {
                height: 4rem;
                width: 100%;
            }
        }

        .loginBtn {
            margin-top: 2rem;
            width: 80%;
            // font-weight: bold;
            border-radius: 0.2rem;
            font-size: 1.2rem;
            background-color: $uni-color-theme-5;
            border: none;
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3);

        }

        .forget {
            // position: absolute;
            width: 80%;

            float: left;
            font-size: 0.6rem;
            margin-top: 0.5rem;
            color: $uni-text-color-grey;
        }

        .register {
            font-size: 0.6rem;
            margin-top: 1.5rem;
            color: $uni-text-color-grey;
            text-align: center;

            span {
                font-size: 0.8rem;
                color: $uni-color-theme-5;
                font-weight: bold;
            }
        }
    }

}
</style>